<template>
  <div>
    <div class="boxHeader">
      <p>上传</p>
      <i class="el-icon-close" @click="closeAddBox"></i>
    </div>
    <div class="addMainBox">
      <label class="Correlation">
        <p class="select">选择类目 ：</p>
        <el-select v-model="additemType" clearable>
          <el-option
            v-for="item in this.$store.state.file.uploadItemList"
            :key="item.id"
            :label="item.name"
            :value="item.name"
            @click.native="selectUploadItem(item)"
          >{{item.name}}</el-option>
        </el-select>
      </label>
      <div class="uploadDoc">
        <p class="select">上传文件：</p>
        <div class="selectUpload">
          <el-upload
            class="upload-demo"
            :action="uploadPdf"
            :limit="10"
            ref="upload"
            accept=".pdf, .PDF"
            :on-error="onError"
            :before-upload="beforeUpload"
            :on-success="onsuccessUpload"
            :with-credentials="true"
            :headers="headOfRequest"
            :show-file-list="false"
          >点击上传</el-upload>
        </div>
        <p class="warning">注意：暂时只支持PDF文件，最多可同时上传10个文件。</p>
      </div>
      <ul class="uploadDocList" v-show="true">
        <li class="uploadDocItem" v-for="(item,index) in learningDTOList" :key="index ">
          <img src="@/assets/document/upload.png" />
          <div class="docTitle">{{item.docTitle}}</div>
          <i class="el-icon-close" @click="deletedocTitle(index)"></i>
        </li>
      </ul>
    </div>
    <footer>
      <div class="cancel" @click="closeAddBox">取消</div>
      <div class="determainAdd" @click="determainAdd">确定</div>
    </footer>
  </div>
</template>

<script>
import { getToken } from '@/utils/token'
import { uploadPdf } from '@/api/file'
import { addData } from '@/api/documentModule'
export default {
  data () {
    return {
      // 上传图片组件的请求头设置
      headOfRequest: { token: getToken() },
      uploadPdf: uploadPdf,
      // 弹框内
      itemIndex: 1,
      file: '',
      doUpload: '',
      fileName: '',
      fileSize: '',
      additemType: '',
      // 上传类目id
      typeId: '',
      // 项目id
      id: 0,
      // 上传成功的文件的列表,
      learningDTOList: []
    }
  },
  methods: {
    beforeUpload (file) {
      const limit = file.size / 1024 / 1024 <= 5
      if (!limit) {
        this.$message.error('pdf文件大小不得超过5M')
        return false
      }
      this.file = file
      this.fileName = file.name
      this.fileSize = file.size
      const reader = new FileReader()
      reader.readAsDataURL(file)
      const that = this
      reader.onload = function () {
        that.fileData = reader.result
      }
    },
    // pdf上传成功
    async onsuccessUpload (response, file, fileList) {
      if (response.code === 200) {
        if (this.learningDTOList.length < 10) {
          this.learningDTOList.push({
            docTitle: response.data.name,
            docUrl: response.data.id,
            isExperts: this.id,
            typeId: ''
          })
        } else {
          this.$message({
            message: '最多可同时上传10个',
            type: 'error',
            duration: 500
          })
        }
      } else {
        this.$message({
          message: response.message,
          type: 'error',
          duration: 500
        })
      }
      // console.log(this.learningDTOList)
    },
    onError (err) {
      this.$message.error(err.message || '上传失败')
    },
    // 选择上传文件分类
    selectUploadItem (item) {
      this.typeId = item.id
    },
    // 删除添加的文件
    deletedocTitle (item) {
      this.learningDTOList.splice(item, 1)
    },
    // 关闭添加框
    closeAddBox () {
      this.$store.state.showUploadBox = false
      this.$store.state.ifShowCover = false
    },
    // 确定添加此类目得所有文档
    async determainAdd () {
      if (this.additemType) {
        this.learningDTOList.forEach(item => {
          item.typeId = this.typeId
        })
        const res = await addData(this.learningDTOList)
        // console.log(res)
        if (res.data.code === 200) {
          this.$message({
            message: res.data.message,
            type: 'success',
            duration: 500
          })
        }
        await this.$store.dispatch('file/updateTableList', {
          pageSize: 10,
          id: 0,
          index: 1
        })
        this.$store.state.showUploadBox = false
        this.$store.state.ifShowCover = false
      } else {
        this.$message({
          message: '请选择类目',
          type: 'error',
          duration: 500
        })
      }
    }
  },
  created () {
  }
}
</script>

<style  scoped lang="scss">
.addMainBox {
  position: relative;
  .Correlation {
    .select {
      position: absolute;
      width: 168px;
      height: 22px;
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      text-align: right;
      top: 53px;
      left: 42px;
    }
    .select::before {
      content: "*";
      color: #4868ff;
    }
    .el-select {
      width: 400px;
      height: 48px;
      position: absolute;
      top: 45px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .uploadDoc {
    position: relative;
    .select {
      position: absolute;
      width: 168px;
      height: 22px;
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      text-align: right;
      top: 120px;
      left: 42px;
    }
    .select::before {
      content: "*";
      color: #4868ff;
    }
    .selectUpload {
      cursor: pointer;
      position: absolute;
      top: 113px;
      left: 220px;
      width: 84px;
      height: 36px;
      border-radius: 18px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 36px;
      text-align: center;
      ::v-deep .el-upload {
        width: 84px;
        height: 36px;
        background: rgba(72, 104, 255, 1);
        border: 0;
      }
    }
    .warning {
      position: absolute;
      top: 122px;
      left: 324px;
      font-size: 12px;
      font-weight: 400;
      color: rgba(255, 180, 21, 1);
    }
  }
  .uploadDocList {
    overflow-y: auto;
    position: absolute;
    top: 170px;
    left: 220px;
    width: 420px;
    height: 334px;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      width: 4px;
      height: 120px;
      // scrollbar-arrow-color: red;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: rgba(220, 220, 220, 1);
      // scrollbar-arrow-color: red;
    }
    &::-webkit-scrollbar-track {
      border-radius: 0;
      background: #fff;
    }
    .uploadDocItem {
      position: relative;
      margin-top: 10px;
      width: 400px;
      transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
      height: 72px;
      border: 1px solid rgba(242, 242, 242, 1);
      img {
        margin-top: 15px;
        margin-left: 16px;
        width: 42px;
        height: 42px;
      }
      .docTitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
        height: 20px;
        width: 290px;
        font-size: 14px;
        left: 70px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }
    .el-icon-close {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 23px;
      cursor: pointer;
      line-height: 72px;
      font-size: 16px;
    }
    }
    .uploadDocItem:hover {
      border: 1px solid #ff2b2b;
      .el-icon-close {
        color: #ff2b2b;
      }
    }
  }
}
@import "@/styles/clickBox.scss";
</style>
